<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <link  href="../../hos_manage/images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../css/sweetalert.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="../css/pageCode.css?cache=<%=Math.random()%>" />

    <script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone" id="add_user">
    <%@ include file="../left_menu.jsp"%>
    <!--右边内容-->
        <div class="right_cont">
            <!--右边导航下面内容-->
            <div>
                <div class="message_hos_news_container">
                    <div class="department_top">
                        <div class="department_top_left department_top_top">
                          <span>
                             <p class="padding-right-min" v-html="title"></p>
                          </span>
                        </div>
                        <div class="department_top_right ui_line_height">
                          <a href="user.jsp" >
                              <span class="add_btn doctor_add_btn" id='doctor_add_btn'>返回</span>
                          </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="role_box">
                        <div class="role_name">
                            <span>登录名:　</span>
                            <input type="text" v-model="form.user_name" @input="valiUserName()" @compositionstart="valiUserName()" @compositionend="valiUserName()"/>
                            <div class="test_tip" v-if="nameExist">登录名重复</div>
                            <div class="test_tip" v-html="formVali.user_name" v-else></div>
                        </div>
                        <div class="role_name">
                            <span>姓　名:　</span>
                            <input type="text" v-model="form.name" @input="vali('name')" @compositionstart="vali('name')" @compositionend="vali('name')"/>
                            <div class="test_tip" v-html="formVali.name"></div>
                        </div>
                        <div class="role_name">
                            <span>登录密码:</span>
                            <input type="password" v-model="form.password" @input="vali('password')" @compositionstart="vali('password')" @compositionend="vali('password')"/>
                            <div class="test_tip" v-html="formVali.password"></div>
                        </div>
                        <div class="role_name">
                            <span>确认密码:</span>
                            <input type="password" v-model="form.repassword" @input="vali('repassword')" @compositionstart="vali('repassword')" @compositionend="vali('repassword')"/>
                            <div class="test_tip" v-html="formVali.repassword"></div>
                        </div>
                        <div class="role_name">
                            <span>选择皮肤</span>
                            <select v-model="skinChoosed">
                                <option v-for="i in skin" :value="i" v-html="i"></option>
                            </select>
                        </div>
                        <div class="role_name">
                            <span>所属角色:</span>
                            <div class="ui_dark" v-html="roleName"></div>
                        </div>
                        <div class="role_sure" @click="submit()">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <script src="/js/vali.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#add_user",
            data: {
                title: "添加用户",
                roleName: "",
                role: {},
                nameExist: false,
                nameTimeout: false,
                form: {
                    user_name: "",
                    name: "",
                    password: "",
                    repassword: "",
                },
                formTag: {
                    user_name: false,
                    name: false,
                    password: false,
                    repassword: false,
                },
                formVali: {
                    user_name: "",
                    name: "",
                    password: "",
                    repassword: "",
                },
                skin: ["business", "default", "txzj"],
                skinChoosed: "business",
            },
            computed: {
                valiResultPass: function() {
                    for (var i in this.formVali) {
                        if (!this.formTag[i]) {
                            return false;
                        }
                    }
                    if (!this.nameExist) {
                        return true;
                    } else {
                        return false;
                    }
                }
            },
            methods: {
                valiUserName: function() {
                    this.checkName();
                    this.vali("user_name");
                },
                checkName: function() {
                    var self = this;
                    clearTimeout(this.nameTimeout);
                    if (this.form.user_name) {
                        this.nameTimeout = setTimeout(function() {
                            $.ajax({
                                type: 'POST',
                                url: "add_user.jsp",
                                data: hasHospitalPower.parms({
                                    act: "check_user",
                                    user_name: self.form.user_name,
                                }),
                                success: function(res) {
                                    res = JSON.parse(res);
                                    if (res.errcode == 0) {
                                        self.nameExist = false;
                                    } else {
                                        self.nameExist = true;
                                    }
                                },
                            });
                        }, 700);
                    }
                },
                vali: function(key) {
                    if (key == "repassword" || (key == "password" && this.form.repassword != "")) {
                        if (this.form.repassword != this.form.password) {
                            this.formVali["repassword"] = "两次密码不一致";
                            this.formTag["repassword"] = false;
                        } else {
                            this.formVali["repassword"] = "";
                            this.formTag["repassword"] = true;
                        }
                    }
                    if (key != "repassword") {
                        var text = validateModule.done(this.form, key);
                        if (text != "") {
                            this.formTag[key] = false;
                        } else {
                            this.formTag[key] = true;
                        }
                        this.formVali[key] = text;
                    }
                },
                submit: function() {
                    if (!this.valiResultPass) {
                        swal("请完善信息");
                        return;
                    }
                    $.ajax({
                        type: 'POST',
                        url: "add_user.jsp",
                        data: hasHospitalPower.parms({
                            act: "add_user",
                            role_id: this.role.id + "",
                            user_name: this.form.user_name,
                            name: this.form.name,
                            password: this.form.password,
                            repassword: this.form.repassword,
                            skin: this.skinChoosed,
                        }),
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                swal({
                                    title: "添加成功",
                                }, function() {
                                    locationHerf("user");
                                });
                            } else {
                                swal(res.errmsg);
                            }
                        },
                    });
                }
            },
            ready: function() {
                if (hasHospitalPower.power()) {
                    this.title += "-" + hasHospitalPower.nowHospital.name;
                }
                var addUserParms = getHrefParms("add_user");
                this.role = addUserParms.role;
                this.roleName = this.role.name;
                validateModule.addValidate("name", "name");
                validateModule.addValidate("password", "password");
                validateModule.addValidate("user_name", "user_name");
            }
        });
    </script>
</body>
</html>
